﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Register.aspx.cs" Inherits="MiaoWeiProject.tangguangzhou.Register" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>注册 - 妙味课堂</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/slide.js"></script>
    <%--滑动验证引用的js--%>
    <script type="text/javascript">
        var locked;
        window.onload = function () {
            slide();
            //禁止F12
            $("*").keydown(function (e) {//判断按键
                e = window.event || e || e.which;
                if (e.keyCode == 123) {
                    e.keyCode = 0;
                    return false;
                }
            });
            //禁止审查元素
            $(document).bind("contextmenu", function (e) {
                return false;
            });
        }
        window.onresize = function () {
            if (locked == true) {
                var boxWidth = $('#slide_box').width();
                $('#slide_xbox').width(boxWidth);
            } else {
                slide();
            }
        }
        //滑动解锁移动
        function slide() {
            var slideBox = $('#slide_box')[0];
            var slideXbox = $('#slide_xbox')[0];
            var btn = $('#btn')[0];
            var slideBoxWidth = slideBox.offsetWidth;
            var btnWidth = btn.offsetWidth;
            //pc端
            btn.ondragstart = function () {
                return false;


            };
            btn.onselectstart = function () {
                return false;
            };
            btn.onmousedown = function (e) {
                var disX = e.clientX - btn.offsetLeft;
                document.onmousemove = function (e) {
                    var objX = e.clientX - disX + btnWidth;
                    if (objX < btnWidth) {
                        objX = btnWidth
                    }
                    if (objX > slideBoxWidth) {
                        objX = slideBoxWidth
                    }
                    $('#slide_xbox').width(objX + 'px');
                };
                document.onmouseup = function (e) {
                    var objX = e.clientX - disX + btnWidth;
                    if (objX < slideBoxWidth) {
                        objX = btnWidth;
                    } else {
                        objX = slideBoxWidth;
                        locked = true;
                        $('#slide_xbox').html('验证通过<div id="btn"><i class="iconfont icon-xuanzhong" style="color: #35b34a;"></i></div>');
                        $('#btn').css('background-image', 'url(tgzimages/wancheng.png)')
                    }
                    $('#slide_xbox').width(objX + 'px');
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            };


            //移动端
            var cont = $("#btn");
            var startX = 0, sX = 0, moveX = 0, leftX = 0;
            cont.on({//绑定事件
                touchstart: function (e) {
                    startX = e.originalEvent.targetTouches[0].pageX;//获取点击点的X坐标
                    sX = $(this).offset().left;//相对于当前窗口X轴的偏移量
                    leftX = startX - sX;//鼠标所能移动的最左端是当前鼠标距div左边距的位置
                },
                touchmove: function (e) {
                    e.preventDefault();
                    moveX = e.originalEvent.targetTouches[0].pageX;//移动过程中X轴的坐标
                    var objX = moveX - leftX + btnWidth;
                    if (objX < btnWidth) {
                        objX = btnWidth
                    }
                    if (objX > slideBoxWidth) {
                        objX = slideBoxWidth
                    }
                    $('#slide_xbox').width(objX + 'px');
                },
                touchend: function (e) {
                    var objX = moveX - leftX + btnWidth;
                    if (objX < slideBoxWidth) {
                        objX = btnWidth;
                    } else {
                        objX = slideBoxWidth;
                        locked = true;
                        $('#slide_xbox').html('验证通过<div id="btn"><i class="iconfont icon-xuanzhong" style="color: #35b34a;"></i></div>');
                        $('#btn').css('background-image', 'url(tgzimages/wancheng.png)')
                    }
                    $('#slide_xbox').width(objX + 'px');
                }
            });
        }

    </script>
    <link href="Register_css.css" rel="stylesheet" />
    <link href="yanzhengjs_css.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <div class="content bglogin">
            <div class="main">
                <div class="logo"><em>&nbsp;</em><img src="../images/logo.png" /></div>
                <div class="title">注册妙味课堂</div>

                <div class="inpline">
                    <label class="inpL">
                        <span data-placeholder="请输入手机号"></span>
                        <input id="phonereg-phone" type="text" /></label>
                </div>

                <div class="inpline" id="dingxiang">
                    <div id="slide_box">
                        <div id="slide_xbox">
                            <div id="btn">
                            </div>
                        </div>
                        请按住滑块，拖动到最右边
                    </div>
                </div>
                <div class="inpline">
                    <label class="inpS"><span>请输入短信验证码</span><input id="phonereg-code" type="text" /></label>
                    <button type="button" id="phonereg-sendcode" class="btns">获取验证码</button>
                </div>
                <div class="inpline">
                    <label class="inpL"><span>请输入密码</span><input type="text" onfocus="this.type='password'" id="phonereg-pwd" /></label>
                </div>
                <div class="inpline">
                    <button type="button" id="phonereg-submit" class="btn">确 认</button>
                </div>
                <div class="textline center">
                    <span>已有账号？<a href="Login.aspx">直接登录</a></span>
                </div>
                <div class="note">
                    <i class="noteIcon">&nbsp;</i>
                    <em>&nbsp;</em>
                    <span class="noteText">提示：2017年2月7日之前注册并开通VIP会员的用户，请通过用户名方式登录，勿重复注册新帐号（帐号无VIP权限）。</span>
                </div>
            </div>
        </div>
    </form>
</body>
</html>
